<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>操作日志</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-row>
        <a-col :span="24">
          <a-form layout="inline">
            <a-form-item label="姓名">
              <a-input v-model="searchForm.name" />
            </a-form-item>
            <a-form-item label="账号">
              <a-input v-model="searchForm.account" />
            </a-form-item>
            <a-form-item label="操作时间">
              <a-range-picker @change="onChange">
                <a-icon slot="suffixIcon" type="calendar" />
              </a-range-picker>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="handleSubmit">查询</a-button>
            </a-form-item>
          </a-form>

          <a-table
            :columns="columns"
            :data-source="tableData"
            class="tableMargin"
            :pagination="pagination"
            rowKey="logId"
          >
            <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
          </a-table>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { queryOperationLogList } from '@/api/systemPersonnelManage'

export default {
  data () {
    return {
      searchForm: {
        name: '',
        account: '',
        time1: '',
        time2: ''
      },
      columns: [{
        title: '序号',
        width: 60,
        scopedSlots: { customRender: 'rn' }
      }, {
        title: '姓名',
        dataIndex: 'name',
        ellipsis: true
      }, {
        title: '账号',
        dataIndex: 'account',
        ellipsis: true
      }, {
        title: '操作行为',
        dataIndex: 'action',
        ellipsis: true
      }, {
        title: '操作时间',
        dataIndex: 'createTime',
        ellipsis: true
      }],
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10
    }
  },
  methods: {
    queryOperationLogList () {
      queryOperationLogList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.queryOperationLogList()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.queryOperationLogList()
          }
        }
      })
    },
    onChange (date, dateStr) {
      this.searchForm.time1 = dateStr[0]
      this.searchForm.time2 = dateStr[1]
    },
    handleSubmit () {
      this.pageNum = 1
      this.queryOperationLogList()
    }
  },
  created () {
    this.queryOperationLogList()
  }
}
</script>

<style lang="less" scoped>
</style>
